<template>
  <div id="app">
    <router-view></router-view>
    <audio :src="menuMp3" controls="controls" id="menuAudio" style="left: -1000px;position: absolute;"></audio>
  </div>
</template>

<script>
  import menuMp3 from './assets/menu.mp3'

  export default {
    name: 'App',
    data () {
      return {
        timer: null,
        menuMp3: menuMp3
      }
    },
    created () {
      this.handleGetTimer()
      const currentMenu = window.sessionStorage.getItem('currentMenu')
      const num = window.sessionStorage.getItem('num')
      this.$store.dispatch('changeNum1', num || 'admin')
      this.$store.dispatch('setCurrentMenu', currentMenu || '')
      window.sessionStorage.removeItem('num')
      window.sessionStorage.removeItem('currentMenu')
      window.addEventListener('beforeunload', () => {
        const num = this.$store.getters.getChangeAbleNum
        const currentMenu = this.$store.getters.getCurrentMenu
        window.sessionStorage.setItem('num', num)
        window.sessionStorage.setItem('currentMenu', currentMenu)
      })
    },
    mounted () {
      (function (doc, win) {
        let docEl = doc.documentElement
        let isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        let dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1
        dpr = window.top === window.self ? dpr : 1 // 被iframe引用时，禁止缩放
        dpr = 1
        let scale = 1 / dpr
        let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
        docEl.dataset.dpr = dpr
        let metaEl = doc.createElement('meta')
        metaEl.name = 'viewport'
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale
        docEl.firstElementChild.appendChild(metaEl)
        let recalc = function () {
          let width = docEl.clientWidth
          if (width / dpr > 750) {
            width = 750 * dpr
          }
          // 乘以100，px : rem = 100 : 1
          docEl.style.fontSize = 100 * (width / 750) + 'px'
        }
        recalc()
        if (!doc.addEventListener) return
        win.addEventListener(resizeEvt, recalc, false)
      })(document, window)
    },
    methods: {
      handleGetTimer () {
        // const _this = this
        // let timers = setInterval(function () {
        //   console.log(_this.$route)
        // }, 1000)
        //
        // this.timer = timers
      }
    },
    beforeDestroy () {
      const timer = this.timer
      if (timer) {
        clearInterval(timer)
        this.timer = null
      }
    },
    sockets: {
      connect () { // 监听链接事件
        this.id = this.$socket.id
        this.$socket.emit('login', 'connect')
      },
      message (data) { // 监听message
        console.log(data)
      }
    }
  }
</script>

<style>
  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
  }

  .el-message__icon {
    font-size: 16px;
  }
</style>
